<template>
  <div class="page">
    <div class="calendar-bar-box">
      <img src="../../assets/img/ic/left_calendar@2x.png" alt="">
      <div>
        <span>2018-09-10</span>
        <img src="../../assets/img/ic/calendar@2x.png" alt="">
      </div>
      <img src="../../assets/img/ic/right_calendar@2x.png" alt="">
    </div>
    <div class="num-box vux-1px-t">
      <div>
        <span>购买量(张)</span>
        <span>10</span>
      </div>
      <div>
        <div class="vux-1px-r">
          <span>发放量(张)</span>
          <span>8</span>
        </div>
        <div class="vux-1px-r">
          <span>使用量(张)</span>
          <span>8</span>
        </div>
        <div>
          <span>发放员(个)</span>
          <span>8</span>
        </div>
      </div>
    </div>
    <div class="people-list-box">
      <table>
        <thead>
          <tr>
            <th>发放员</th>
            <th>发放量</th>
            <th>使用量</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>江灿灿</td>
            <td>6</td>
            <td>5</td>
          </tr>
          <tr>
            <td>江灿灿</td>
            <td>6</td>
            <td>5</td>
          </tr>
          <tr>
            <td colspan="3">
              <button>查看详情</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <calendarDay></calendarDay>
  </div>
</template>

<script>
import calendarDay from '@/components/calendarDay'
  export default {
    components:{
      calendarDay
    },
    data(){
      return{
        
      }
    },
    created(){
      
    },
  }
</script>

<style lang="less">
.calendar-bar-box{
  height: 82px;
  line-height: 82px;
  margin-top: 20px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items:center;
  img{
    width: 48px;
    height: 48px;
  }
  > div{
    span{
      font-size: 30px;
      color: #262626;
    }
  }
}
.num-box{
  height: 366px;
  background: #ffffff;
  > div{
    display: flex;
    flex-direction: column;
    align-items:center;
    &:first-child{
      padding: 50px 0;
      span:last-child{
        font-size: 64px;
        color: #181818;
      }
    }
    &:last-child{
      display: flex;
      flex-direction: row;
      > div{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items:center;
        span:last-child{
          padding-top: 10px;
        }
      }
    }
    span{
      &:first-child{
        font-size: 26px;
        color: #ABABAB;
        letter-spacing: 1px;
      }
    }
  }
}
.people-list-box{
  height: 442px;
  background: #ffffff;
  margin-top: 20px;
  padding: 3% 2.3%;
  table{
    width: 100%;
    border-collapse:collapse;
    border: 1px solid #D7D7D7;
    border-radius: 6px 6px 0 0;
    thead{
      background: #E5ECF4;
      border-bottom: 1px solid #D7D7D7;
      tr th{
        height: 80px;
        font-size: 30px;
        color: #696969;
        letter-spacing: 1px;
      }
    }
    tbody{
      tr{
        height: 85px;
        border-bottom: 1px solid #D7D7D7;
        &:last-child{
          height: 100px;
          text-align: center;
          button{
            background: @blue;
            border-radius: 100px;
            width: 380px;
            height: 64px;
            font-size: 28px;
            color: #FFFFFF;
          }
        }
      }
      tr td{
        text-align: center;
        font-size: 30px;
        color: #262626;
      }
    }
  }
}
</style>
